<template>
  <el-row class="tab">
    <el-tabs type="border-card" :before-leave="beforeLeave" @tab-click="tabClick">
      <el-tab-pane v-for="(item) in arr" :key="item.id"  :label="item.label" >
        <div>
          <ul>
            <li v-for="(it) in arr1" :key="it.id">{{it.label}}</li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
<!--    <router-link to="addSecDepart" replace tag="li"> <span>跳转到addSecDepart</span></router-link>-->
    <el-button @click="tiaozhuang">跳转</el-button>
  </el-row>
</template>
<style>
  .tab .router-link-active span{
    color: blue;
  }
</style>
<script>
export default{
  data() {
    return {
      arr: [
        {id: 1, label: '内科'},
        {id: 2, label: '外科'},
        {id: 3, label: '眼科'}
      ],
      arr1: [
        {id: 1, label: '北京1'},
        {id: 2, label: '南京2'},
        {id: 3, label: '上海3'}
      ],
      a: [
        {
          label: '内科',
          twoDepart: [{
            id: 1,
            label: '内科二级科室'
          }, {}, {}]
        },
        {},
        {}
      ]
    }
  },
  methods: {
    // 跳转
    tiaozhuang() {
      const userId = '123'
      // this.$router.push('addSecDepart');
      // this.$router.push(`addSecDepart/${userId}`);
      // this.$router.push({path: 'addSecDepart'});
      // this.$router.push({path: `addSecDepart/${userId}`});
      this.$router.push({name: 'user', params: { userId: userId }})
      // this.$router.push({path: 'autoSave', params: { userId: userId }})
      // this.$router.push({name: 'user', query: { plan: userId }})
      // console.log(this.$route);
      // this.$router.push({path: 'doctorDialog', query: { plan: userId}})
      // this.$router.push({name: 'aa', query: { plan: userId}})
      // this.$router.go(1);
      // this.$router.push('doctorDialog')
    },
    // 切换标签之前的钩子
    beforeLeave(activeName, oldActiveName) {
      console.log(activeName);
      console.log(oldActiveName);
    },
    tabClick(tab, e) {
      console.log(tab)
      console.log(e)
    },
  }
}
</script>
